<template>
  <div class="backend-status">
    <el-alert
      v-if="!isConnected"
      title="后端服务未连接"
      type="error"
      :closable="false"
      show-icon
    >
      <template #default>
        <p>无法连接到后端服务器，请检查：</p>
        <ul>
          <li>后端服务是否正在运行在 <code>http://localhost:8081</code></li>
          <li>数据库连接是否正常</li>
          <li>网络连接是否正常</li>
        </ul>
        <el-button type="primary" @click="checkConnection" :loading="checking">
          重新检查连接
        </el-button>
      </template>
    </el-alert>
    
    <el-alert
      v-else
      title="后端服务连接正常"
      type="success"
      :closable="true"
      show-icon
    />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { homeAPI } from '../services/api.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'BackendStatus',
  setup() {
    const isConnected = ref(false)
    const checking = ref(false)
    
    const checkConnection = async () => {
      checking.value = true
      try {
        await homeAPI.getSystemStatus()
        isConnected.value = true
        ElMessage.success('后端服务连接正常')
      } catch (error) {
        isConnected.value = false
        console.error('后端连接检查失败:', error)
      } finally {
        checking.value = false
      }
    }
    
    onMounted(() => {
      checkConnection()
    })
    
    return {
      isConnected,
      checking,
      checkConnection
    }
  }
}
</script>

<style scoped>
.backend-status {
  margin-bottom: 20px;
}

.backend-status ul {
  margin: 10px 0;
  padding-left: 20px;
}

.backend-status li {
  margin-bottom: 5px;
}

.backend-status code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}
</style>
